import { Table } from '@/components/Table'
import { useTable } from '@/hooks/web/useTable'

/** 表格部分 */
const tableRef = ref(null)
const columns = [
  { field: 'title', minWidth: 150, label: '标题', emptyShow: '--' },
  { field: 'action', width: 120, label: '操作', fixed: 'right' }
]
const getListApi = (data) => request.postV2({ url: '', data })
const { register, tableObject, methods } = useTable({
  props: { columns },
  getListApi,
  pageSize: 20
})
// 监听分页
const paginationObj = ref({})
watch(
  () => [tableObject.total, tableObject.pageSize],
  (data) => {
    paginationObj.value = { total: data[0], pageSize: data[1] }
  }
)
// 搜索
const searchParams = reactive({})
const searchHandle = () => {
  const { title } = searchParams
  const data = { title }
  methods.setSearchParams(data)
}

const renderTable = () => (
  <Table
    class="m-t-20 table-wrap"
    ref={tableRef}
    vModel:pageSize={tableObject.pageSize}
    vModel:currentPage={tableObject.currentPage}
    data={tableObject.tableList}
    loading={tableObject.loading}
    pagination={paginationObj.value}
    onRegister={register}
  >
    {{
      action: ({row}) => (<div class="el-link-container">
        <ElLink type="primary">编辑</ElLink>
      </div>)
    }}
  </Table>
)